<template>
  <div class="album">
    <music-list
      :songs="songs"
      :title="title"
      :pic="pic"
      :loading="loading"
      :isAlBum="isAlBum"
    ></music-list>
  </div>
</template>

<script>
import MusicList from "@/components/music-list/music-list.vue";
import { IS_TOPLIST } from "@/assets/js/constant.js";
import { ALBUM_KEY } from "@/assets/js/constant.js";
import { getPlayListDetail } from "@/api/index.js";
export default {
  components: { MusicList },
  props: {
    data: Object,
  },
  data() {
    return {
      songs: [],
      loading: true,
      isTopList: IS_TOPLIST,
      isAlBum: ALBUM_KEY,
    };
  },
  methods: {
    getSongList(arr) {
      if (!Array.isArray(arr)) {
        return;
      }
      if (!arr.length) {
        return;
      }
      let result =
        (arr.length &&
          arr.map((item) => {
            return {
              id: item.id,
              name: item.name,
              pic: item.al.picUrl,
              singer: item.ar[0].name,
              url: `https://music.163.com/song/media/outer/url?id=${item.id}.mp3`,
              duration: item.dt,
            };
          })) ||
        [];
      return result;
    },
  },
  computed: {
    computedData() {
      let ret = null;
      const data = this.data;
      ret = data;
      return ret;
    },
    pic() {
      const data = this.computedData;
      return data && data.picUrl;
    },
    title() {
      const data = this.computedData;
      return data && (data.name || data.name);
    },
  },
  async created() {
    const data = this.computedData;
    if (!data) {
      const path = this.$route.matched[0].path;
      this.$router.push({
        path,
      });
      return;
    }
    const { data: singerDetail } = await getPlayListDetail(this.data.id, 20);
    this.songs = this.getSongList(singerDetail.playlist.tracks);
    this.loading = false;
  },
};
</script>

<style lang="scss" scoped>
.album {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: $color-background;
}
</style>
